<template lang="pug">
div
  table.ui.celled.table
    thead
      tr
        //- th ID
        th SKU
        th 颜色
        th 库存
        th 排序值
        th 状态
        th URL
    tbody
      tr(v-for="subProduct in product.sub_products")
        //- td {{subProduct.id}}
        td
          .ui.input
            input(type='text', v-model="subProduct.sku_name")
        td
          .ui.input
            input(type='text', v-model="subProduct.name")
        td
          .ui.input
            input(type='text', v-model="subProduct.stock")
        td
          .ui.input
            input(type='text', v-model="subProduct.order_index")
        td
          obj-single-select(
            :options="helper.subProductStatusArray",
            key="value",
            label="text",
            :value.sync="subProduct.status",
            type="value",
          )
        td
          .ui.input
            input(type='text', v-model="subProduct.url")
  a.pointer(@click="addSku")
    i.icon.plus.no-margin.no-padding
    | 增加 SKU
  .ui.section.divider
  h2.ui.header 基本信息
  .ui.form
    .three.fields
      .field
        input(type='text', v-model="product.name", placeholder="名字")
      .field
        array-single-select(
          :options="helper.productTypeArray",
          :selected.sync="product.properties.type",
        )
      .field
        input(type='text', v-model="product.sort_index", placeholder="排序值")
    .three.fields
      .field
        input(type='text', v-model="product.properties.weight", placeholder="重量")
      .field
        input(type='text', v-model="product.price", placeholder="价格")
      .field
        input(type='text', v-model="product.url", placeholder="URL")
    .three.fields
      .field
        array-single-select(
          :options="helper.productShapeArray",
          :selected.sync="product.properties.shape",
        )
      .field
        obj-single-select(
          :options="helper.productGenderArray",
          key="value",
          label="text",
          :value.sync="product.properties.gender",
          type="value",
        )
      .field
        array-single-select(
          :options="helper.productSizeArray",
          :selected.sync="product.properties.size",
        )
    .ui.section.divider
    h2.ui.header 陈列顺序
    .ui.grid
      .five.wide.column.handle(v-dragable-for="subProduct in product.sub_products", options='{"ghostClass": "ghost", "handle": ".handle"}')
        .ui.input.fluid
          input(type='text', v-bind:value="`${this.subProduct.sku_name} ${this.subProduct.name}`", readonly)
        br
        .flex.ac.jsb
          img-upload(v-bind:src.sync='subProduct.thumbnail.large')
          img-upload(v-bind:src.sync='subProduct.thumbnail.dot')
  .ui.section.divider
  .ui.grid
    .ten.wide.column
      h2.ui.header 产品描述
    .six.wide.column.right.aligned
      obj-single-select(
        :options="product.sub_products",
        key="sku_name",
        label="sku_name",
        :selected.sync="selected",
        type="selected",
        :custom-label="helper.subProductCustomLabel",
      )
  table.ui.very.basic.table(v-for="subProduct in product.sub_products")
    thead(v-if="subProduct.sku_name != selected.sku_name")
      tr
        th 图片
        th 文字描述
        th 操作
    tbody
      tr.handle(v-dragable-for="description in subProduct.description", options='{"ghostClass": "ghost", "handle": ".handle"}')
        td.collapsing
          img-upload(v-bind:src.sync="description.photo")
        td
          .ui.form
            .field
              textarea(v-model="description.text")
        td
          a.pointer(@click="removeDescription(description, subProduct.description)") 删除
      tr
        td
          a.pointer(@click="addDescription(subProduct.description)")
            i.icon.plus.no-margin.no-padding
            | 增加
  //- .ui.section.divider
  //- h2.ui.header 猜你喜欢
  //- .ui.grid
  //-   .five.wide.column
  //-     .ui.grid
  //-       .four.wide.column
  //-         .ui.input.fluid
  //-           input(type='text', value="01")
  //-       .twelve.wide.column
  //-         .ui.input.fluid
  //-           input(type='text', value="01")
</template>

<script>
import Multiselect from 'vue-multiselect'
import imgUpload from '../../modules/upload/img'
import ObjSingleSelect from '../../modules/select/objSingle'
import ArraySingleSelect from '../../modules/select/arraySingle'

export default {
  name: 'productEdit',
  components: {
    Multiselect,
    ObjSingleSelect,
    ArraySingleSelect,
    imgUpload,
  },
  props: ['product', 'selected'],
  vuex: {
    getters: {
      subProductSource: ({ product }) => product.subProduct,
      descriptionSource: ({ product }) => product.description,
    },
    actions: {}
  },
  data() {
    return {
      // selected: null,
    }
  },
  computed: {
  },
  methods: {
    addSku () {
      this.product.sub_products.push(_.cloneDeep(this.subProductSource))
    },
    addDescription (description) {
      description.push(_.cloneDeep(this.descriptionSource))
    },
    removeDescription (item, items) {
      swalConfirm('确定要删除?', ()=>{
        items.$remove(item)
      }, true)
    }
  },
  ready() {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
  },
  // watch: {
  //   'product.sub_products': {
  //     handler (val, old) {
  //       this.selected = this.product.sub_products[0]
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
}
</script>

<style lang="sass" scoped>
</style>
